<template>
  <div>
    <navbar-app></navbar-app>
    <div class="content-in">
      <div class="banner">
        <img src="@/assets/images/work/activity-bg01.png" />
        <p>{{ $t('work.activity.teamActivity') }}</p>
      </div>
      <div class="img-box">
        <img src="@/assets/images/work/activity-bg02.png" />
        <img src="@/assets/images/work/activity-bg03.png" />
        <img src="@/assets/images/work/activity-bg04.png" />
        <div class="box-row">{{ $t('work.activity.teamActivity') }}</div>
      </div>
      <div class="img-box">
        <div class="box-row">{{ $t('work.activity.beach') }}</div>
        <img src="@/assets/images/work/activity-bg05.png" />
        <img src="@/assets/images/work/activity-bg06.png" />
        <img src="@/assets/images/work/activity-bg07.png" />
      </div>
      <div class="img-box">
        <div class="box-row-small">{{ $t('work.activity.ktv') }}</div>
        <img src="@/assets/images/work/activity-bg09.png" />
        <img src="@/assets/images/work/activity-bg10.png" />
        <img src="@/assets/images/work/activity-bg11.png" />
      </div>
      <p class="tx-center">{{ $t('work.activity.more') }}</p>
      <img
        :src="
          lang === 'zh'
            ? require('@/assets/images/work/activity-bg12.jpg')
            : require('@/assets/images/work/activity-bg12.png')
        "
        class="foot-bg"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import NavbarApp from '../navbar_app'

export default {
  components: {
    NavbarApp,
  },
  data() {
    return {}
  },
  computed: {
    ...mapState(['lang']),
  },
  methods: {},
}
</script>

<style lang="less" scoped>
.content-in {
  padding: 24px;
}

.banner {
  display: flex;
  position: relative;

  img {
    width: 100%;
  }

  p {
    width: 246px;
    height: 54px;
    background: #0261bc;
    position: absolute;
    right: 0;
    bottom: 40px;
    color: #fff;
    font-size: 30px;
    text-align: center;
    line-height: 54px;
  }
}

.img-box {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0;

  img {
    width: 50%;
  }

  .box-row {
    width: 50%;
    background: #0261bc;
    color: #fff;
    text-align: center;
    font-size: 30px;
    height: 402px;
    line-height: 402px;
    font-weight: bold;
  }

  .box-row-small {
    width: 50%;
    background: #0261bc;
    color: #fff;
    text-align: center;
    font-size: 30px;
    height: 156px;
    line-height: 156px;
    font-weight: bold;
  }
}

.foot-bg {
  width: 100%;
  margin: 20px 0 40px 0;
}
</style>
